<template>
    <div class="comment-reply-list">
        <div
            class="comment-reply-item"
            v-for="item in renderList"
            :key="item.id"
        >
            <div class="avatar">
                <img
                    :src="
                        item.user.avatar ||
                        _oss_ + 'images/user/default-avatar.png'
                    "
                />
            </div>

            <div class="right-comment">
                <div class="comment-top">
                    <div class="comment-user">
                        <span class="user-name">{{
                            item.user.nickname || item.user.mobile
                        }}</span>
                        <span class="reply-tag">回复</span>
                        <span class="reply-name">{{
                            item.to_user.nickname || item.to_user.mobile
                        }}</span>
                    </div>
                </div>
                <div class="comment-content">
                    <div
                        class="content-box"
                        v-html="formatComment(item.comment)"
                    ></div>
                    <img
                        class="icon-delete"
                        :src="_oss_ + 'images/icon-delete.svg'"
                        v-if="
                            userStore.userInfo.id == item.uid ||
                            userStore.userInfo.id == props.authorId
                        "
                        @click="onDel(item)"
                    />
                </div>

                <div class="comment-time">{{ item.createtime }}</div>

                <div class="comment-tools">
                    <CommentReplyWorkM
                        :commentId="props.commentId"
                        :toUid="item.uid"
                        :toUName="item.user.nickname || item.user.mobile"
                        :workId="props.workId"
                        @success="onReplySuccess"
                    />
                </div>
            </div>
        </div>

        <div
            class="see-more"
            v-if="props.list.length > 2 && isExpand == false"
            @click="isExpand = true"
        >
            共{{ props.list.length }}条回复，点击查看
        </div>
        <div class="retract" v-if="isExpand" @click="isExpand = false">
            <el-icon>
                <ArrowUp />
            </el-icon>
            收起
        </div>
    </div>
</template>
<script setup>
import { ArrowUp } from "@element-plus/icons-vue";
import { useContent } from ".";

const userStore = useUserStore();
const emits = defineEmits(["replySuccess", "del"]);

const props = defineProps({
    list: {
        type: Array,
        default: () => [],
    },
    commentId: {
        type: Number,
        default: 0,
    },
    workId: {
        type: Number,
        default: 0,
    },
    authorId: {
        type: Number,
        default: 0,
    },
});

const onReplySuccess = () => {
    emits("replySuccess");
};

const onDel = (item) => {
    emits("del", item);
};

const { renderList, isExpand, formatComment } = useContent(props);
</script>
<style lang="scss" scoped>
.comment-reply-list {
    .comment-reply-item {
        display: flex;
        margin-top: 15px;

        .avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            flex-shrink: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .right-comment {
            width: 100%;
            padding-top: 6px;

            .comment-top {
                display: flex;
                align-items: flex-end;

                .comment-user {
                    display: flex;
                    align-items: center;
                }

                .user-name,
                .reply-name {
                    font-size: 14px;
                    color: #333;
                    font-weight: bold;
                }

                .reply-tag {
                    margin: 0 9px;
                    font-size: 14px;
                    color: #999;
                }
            }

            .comment-time {
                color: #999;
                font-size: 12px;
                margin-top: 10px;
            }
        }

        .author-tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 20px;
            background: #ffad38;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 4px;
            color: #fff;
        }

        .comment-content {
            position: relative;

            .content-box {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                font-size: 14px;
                line-height: 20px;
                color: #333;
                margin-top: 15px;
                word-wrap: break-word;
                word-break: break-word;
                padding-right: 20px;

                :deep(img[emoji-icon]) {
                    width: 24px;
                    height: 24px;
                }
            }

            .icon-delete {
                position: absolute;
                top: 2px;
                right: 0;
                width: 14px;

                cursor: pointer;
            }
        }
    }

    .see-more,
    .retract {
        margin-top: 15px;
        color: #999;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        user-select: none;
    }
}
</style>
